<template>
  <div class="bill_box">
    <Tabs v-model="tabsVal" @on-click="tabsClick">
      <TabPane v-bind:label="$t('m.cuiBill')" name="name1">
        <div class="query-conditions bill_select">
          <div class="items">
            <div class="label">{{this.$t('m.Fēnpèishíjiān')}}</div>
            <DatePicker
              v-model="time1"
              class="ivu-form-control"
              type="daterange"
              format="yyyy-MM-dd"
              :options="assignDate"
              @on-change="assignTimeChange"
              v-bind:placeholder="$t('m.Fēnpèishíjiān')"
            ></DatePicker>
          </div>
          <div class="items">
            <div class="label">{{this.$t('m.sptime')}}</div>
            <DatePicker
              v-model="time2"
              class="ivu-form-control"
              type="daterange"
              format="yyyy-MM-dd"
              :options="repaymentDate"
              @on-change="repaymentTimeChange"
              v-bind:placeholder="$t('m.selectLt')"
            ></DatePicker>
          </div>
          <div class="items">
            <div class="label">{{this.$t('m.orderGid')}}</div>
            <Input
              v-bind:placeholder="$t('m.orderGid')"
              v-model="billOrderNum"
              class="ivu-form-control"
            />
          </div>
          <div class="items">
            <div class="label">{{this.$t('m.userName')}}</div>
            <Input
              v-bind:placeholder="$t('m.userName')"
              v-model="billName"
              class="ivu-form-control"
            />
          </div>
          <div class="items">
            <div class="label">{{this.$t('m.phone')}}</div>
            <Input
              v-bind:placeholder="$t('m.phone')"
              v-model="billCellphone"
              class="ivu-form-control"
            />
          </div>
          <div class="items">
            <div class="label">{{$t('m.userType')}}</div>
            <Select
              clearable
              class="ivu-input-w200"
              v-model="isFirst"
              :placeholder="$t('m.userType')"
            >
              <Option value>{{this.$t('m.entire')}}</Option>
              <Option value="1">{{this.$t('m.shǒucìjièkuǎn')}}</Option>
              <Option value="0">{{this.$t('m.Ngàymai')}}</Option>
            </Select>
          </div>
          <div class="items">
            <div class="label">{{$t('m.yònghùděngjí')}}</div>
            <Select
              clearable
              v-model="levelId"
              class="ivu-input-w200"
              :placeholder="this.$t('m.yònghùděngjí')"
            >
              <Option :value="''">{{ $t("m.entire") }}</Option>
              <Option v-for="item in userDataClass" :value="item.levelId">{{item.levelName}}</Option>
            </Select>
          </div>
          <div class="items">
            <div class="label">{{this.$t('m.repayCreat')}}</div>
            <Select
              v-model="billResult"
              class="ivu-form-control"
              v-bind:placeholder="$t('m.repayCreat')"
            >
              <Option :value="''">{{ $t("m.entire") }}</Option>
              <!-- <Option :value="'repaid_part'">{{ $t("m.bùfènjiéqīng") }}</Option>
              <Option :value="'none'">{{ $t("m.noRepay") }}</Option>-->

              <Option :value="'repayNo'">{{this.$t('m.wèihuánkuǎn')}}</Option>
              <Option :value="'preRepaid'">{{this.$t('m.pre_repaid')}}</Option>
              <!-- <Option :value="'repaid'">{{this.$t('m.yǐjiéqīng')}}</Option> -->
            </Select>
          </div>
          <div class="items">
            <div class="label">{{this.$t('m.isLock')}}</div>
            <Select
              v-model="billLock"
              class="ivu-form-control"
              v-bind:placeholder="$t('m.selectLock')"
            >
              <Option :value="''">{{ $t("m.entire") }}</Option>
              <Option :value="0">{{ $t("m.noLock") }}</Option>
              <Option :value="1">{{ $t("m.Lock") }}</Option>
            </Select>
          </div>
          <div class="items">
            <div class="label">{{this.$t('m.label')}}</div>
            <Select
              v-model="billLabel"
              class="ivu-form-control"
              v-bind:placeholder="$t('m.biāoqiān')"
            >
              <Option value>{{ $t("m.entire") }}</Option>
              <Option
                v-for="(item, index) in billLabelDataList"
                :key="index"
                :value="item.labelId"
              >{{ item.labelName }}</Option>
            </Select>
          </div>
          <div class="items" v-if="flag === 'cuishou'">
            <div class="label">{{$t('m.cuīshōujiēduàn')}}</div>
            <Select
              v-model="csStage"
              class="ivu-form-control"
              :placeholder="$t('m.cuīshōujiēduàn')"
            >
              <Option value>{{ $t("m.entire") }}</Option>
              <Option
                v-for="(item, index) in stageList"
                :key="index"
                :value="item.id"
              >{{ item.name }}</Option>
            </Select>
          </div>


          <div class="items" v-if="rolee === 'admin'">
            <div class="label">{{$t('m.cuishouRen')}}</div>
            <Select
              v-model="billManagerId"
              class="ivu-form-control"
              v-bind:placeholder="$t('m.selectCui')"
            >
              <Option :value="''">{{ $t("m.entire") }}</Option>
              <Option
                v-for="(item, index) in billAssignList"
                :key="index"
                :value="item.account"
              >{{ item.account }}</Option>
            </Select>
          </div>
          <div class="search_content">
            <div class="search_btn_box">
              <Button class="search_btn" @click="emptyQueryInfo">{{$t('m.recycle')}}</Button>
            <Button class="search_btn" type="primary" @click="handleFilterReset">{{$t('m.cháxún')}}</Button>
            </div>
            <div v-show="this.rolee === 'admin'">
              <Button type="success" @click="billAssignEvent">{{$t('m.repoint')}}</Button>
            </div>
          </div>
        </div>

        <div class="bill_table">
          <Table
            ref="coTable"
            border
            :data="billTablesDataList"
            :columns="this.rolee === 'admin'? billTablesAdman : billTables"
            :loading="billLoading"
            @on-selection-change="billTableSelect"
          ></Table>
        </div>

        <div class="bill_table_operation">
          <div class="bill_table_page">
            <Page
              :total="billTablesDataListSize"
              :current.sync="billPage"
              :page-size-opts="[1, 10, 20, 40, 80, 100]"
              show-total
              show-elevator
              show-sizer
              @on-change="billPageChange"
              @on-page-size-change="billPageSizeChange"
            ></Page>
          </div>
        </div>
      </TabPane>
      <TabPane :label="$t('m.cuīshōuwánchéng')" name="name2">
        <div class="query-conditions bill_select">
          <div class="items">
            <div class="label">{{this.$t('m.Fēnpèishíjiān')}}</div>
            <DatePicker
              v-model="time1"
              class="ivu-form-control"
              type="daterange"
              format="yyyy-MM-dd"
              :options="assignDate"
              @on-change="assignTimeChange"
              v-bind:placeholder="$t('m.Fēnpèishíjiān')"
            ></DatePicker>
          </div>
          <div class="items">
            <div class="label">{{this.$t('m.sptime')}}</div>
            <DatePicker
              v-model="time2"
              class="ivu-form-control"
              type="daterange"
              format="yyyy-MM-dd"
              :options="repaymentDate"
              @on-change="repaymentTimeChange"
              v-bind:placeholder="$t('m.selectLt')"
            ></DatePicker>
          </div>
          <div class="items">
            <div class="label">{{this.$t('m.orderGid')}}</div>
            <Input
              v-bind:placeholder="$t('m.orderGid')"
              v-model="billOrderNum"
              class="ivu-form-control"
            />
          </div>
          <div class="items">
            <div class="label">{{this.$t('m.userName')}}</div>
            <Input
              v-bind:placeholder="$t('m.userName')"
              v-model="billName"
              class="ivu-form-control"
            />
          </div>
          <div class="items">
            <div class="label">{{this.$t('m.phone')}}</div>
            <Input
              v-bind:placeholder="$t('m.phone')"
              v-model="billCellphone"
              class="ivu-form-control"
            />
          </div>
          <div class="items">
            <div class="label">{{$t('m.userType')}}</div>
            <Select
              clearable
              class="ivu-input-w200"
              v-model="isFirst"
              :placeholder="$t('m.userType')"
            >
              <Option value>{{this.$t('m.entire')}}</Option>
              <Option value="1">{{this.$t('m.shǒucìjièkuǎn')}}</Option>
              <Option value="0">{{this.$t('m.Ngàymai')}}</Option>
            </Select>
          </div>
          <div class="items">
            <div class="label">{{$t('m.yònghùděngjí')}}</div>
            <Select
              clearable
              v-model="levelId"
              class="ivu-input-w200"
              :placeholder="this.$t('m.yònghùděngjí')"
            >
              <Option :value="''">{{ $t("m.entire") }}</Option>
              <Option v-for="item in userDataClass" :value="item.levelId">{{item.levelName}}</Option>
            </Select>
          </div>
          <div class="items">
            <div class="label">{{this.$t('m.isLock')}}</div>
            <Select
              v-model="billLock"
              class="ivu-form-control"
              v-bind:placeholder="$t('m.selectLock')"
            >
              <Option :value="''">{{ $t("m.entire") }}</Option>
              <Option :value="0">{{ $t("m.noLock") }}</Option>
              <Option :value="1">{{ $t("m.Lock") }}</Option>
            </Select>
          </div>
          <div class="items">
            <div class="label">{{this.$t('m.label')}}</div>
            <Select
              v-model="billLabel"
              class="ivu-form-control"
              v-bind:placeholder="$t('m.biāoqiān')"
            >
              <Option :value="''">{{ $t("m.entire") }}</Option>
              <Option
                v-for="(item, index) in billLabelDataList"
                :key="index"
                :value="item.labelId"
              >{{ item.labelName }}</Option>
            </Select>
          </div>

          <div class="items" v-if="flag === 'cuishou'">
            <div class="label">{{$t('m.cuīshōujiēduàn')}}</div>
            <Select
              v-model="stage"
              class="ivu-form-control"
              :placeholder="$t('m.cuīshōujiēduàn')"
            >
              <Option value>{{ $t("m.entire") }}</Option>
              <Option
                v-for="(item, index) in stageList"
                :key="index"
                :value="item.id"
              >{{ item.name }}</Option>
            </Select>
          </div>

          <div class="items" v-if="rolee === 'admin'">
            <div class="label">{{this.$t('m.cuishouRen')}}</div>
            <Select
              v-model="billManagerId"
              class="ivu-form-control"
              v-bind:placeholder="$t('m.selectCui')"
            >
              <Option :value="''">{{ $t("m.entire") }}</Option>
              <Option
                v-for="(item, index) in billAssignList"
                :key="index"
                :value="item.account"
              >{{ item.account }}</Option>
            </Select>
          </div>

          <div style="margin: 10px 0 20px 0;">
            <Button class="search_btn" @click="emptyQueryInfo">{{$t('m.recycle')}}</Button>
            <Button class="search_btn" type="primary" @click="handleFilterReset">{{$t('m.cháxún')}}</Button>
          </div>
        </div>

        <div class="bill_table">
          <Table
            ref="coTable"
            border
            :data="billTablesDataList"
            :columns="this.rolee === 'admin'? billTablesDone : billTables"
            :loading="billLoading"
            @on-selection-change="billTableSelect"
          ></Table>
        </div>

        <div class="bill_table_operation">
          <div class="bill_table_page">
            <Page
              :total="billTablesDataListSize"
              :current.sync="billPage"
              :page-size-opts="[1, 10, 20, 40, 80, 100]"
              show-total
              show-elevator
              show-sizer
              @on-change="billPageChange"
              @on-page-size-change="billPageSizeChange"
            ></Page>
          </div>
        </div>
      </TabPane>
    </Tabs>
    <!-- 标签页组件 -->
    <dialog-label v-model="billLabelBox" :options="billLabelBoxParam" @ok="billLabelEventOk"></dialog-label>
    <!-- 指派催收人员组件 -->
    <dialog-assign
      v-model="billAssignBox"
      :orderNums="billselectList"
      :list="billAssignList"
      @ok="billAssignEventOk"
    ></dialog-assign>
    <!-- 催收备注组件 -->
    <dialog-remark
      v-model="billRemarkBox"
      :data="billRemarkParam"
      :value="true"
      @ok="billRemarkEventOk"
    ></dialog-remark>

    <!-- <dialog-qrcode v-model="qrModal" :qrData="qrData"></dialog-qrcode> -->

    <!--用户详细资料end-->
    <Modal v-model="baseInfoBox" width="70%">
      <div slot="header" class="billButton">
        <span>{{ $t("m.yònghùrènzhèngzīliào") }}</span>
        <div class="billButtonBox">
          <button
            class="btn btn-success"
            @click="billRemarkEvent(baseInfoUserId,baseInfoOrderGid)"
          >{{ $t("m.cuīshōubèizhù") }}</button>
        </div>
      </div>
      <base-info
        :userId="baseInfoUserId"
        :orderGid="baseInfoOrderGid"
        :baseType="baseInfoType"
        v-if="baseInfoBox"
      ></base-info>
      <div slot="footer"></div>
    </Modal>
  </div>
</template>

<script>
import { mapGetters } from "vuex";
import Identifyinfos from "@/components/identifyInfos";
import dialogQrcode from "@/components/common/dialog-qrcode";
import dialogLabel from "@/components/common/dialog-label";
import orderPoptip from "@/views/collection//components/order-poptip";
import recordPoptip from "@/views/collection/components/record-poptip";
import dialogAssign from "@/views/collection/components/dialog-assign";
import dialogRemark from "@/views/collection/components/dialog-remark";

import BaseInfo from "./baseInfo";

export default {
  name: "baseBill",
  data() {
    return {
      time1: [],
      time2: [],
      stageList: [
        {
          name: `S0 ${this.$t("m.bill")}`,
          id: 's0',
        },
        {
          name: `S1 ${this.$t("m.bill")}`,
          id: 's1',
        },
        {
          name: `S2 ${this.$t("m.bill")}`,
          id: 's2',
        },
        {
          name: `M1 ${this.$t("m.bill")}`,
          id: 'm2',
        },
        {
          name: `M2 ${this.$t("m.bill")}`,
          id: 'm3',
        },
        {
          name: this.$t("m.huàizhàngzhàngdān"),
          id: 'bad',
        }
      ],
      tabsVal: 'name1',
      levelId: "",
      isFirst: "",
      csStage: '',
      //  用户等级
      userDataClass: [],
      billTablesDataList: [],
      billselectList: [],
      billTablesDataListSize: 10,
      billLoading: true,
      billPage: 1,
      billPageSize: 10,
      rolee: "",
      billOrderNum: "",
      billName: "",
      billCellphone: "",
      billRepaymentTimeStart: "",
      billRepaymentTimeEnd: "",
      billAssignTimeStart: "",
      billAssignTimeEnd: "",
      billManagerId: "",
      billResult: "",
      billLock: "",
      billLabel: "",
      baseInfoUserId: "",
      baseInfoOrderGid: "",
      baseInfoType: "2",
      baseInfoBox: false,
      billLabelBox: false,
      billLabelBoxParam: {},
      billRemarkBox: false,
      billRemarkParam: {},
      billLabelDataList: [],
      billTables: [],
      billAssignBox: false,
      billAssignList: [],
      repaymentDate: {
        disabledDate(date) {
          return date && date.valueOf() > Date.now();
        }
      },
      assignDate: {
        disabledDate(date) {
          return date && date.valueOf() > Date.now();
        }
      },
      repaymentStatusArray: {
        repayNo: this.$t("m.wèihuánkuǎn"),
        preRepaid: this.$t("m.wèijiéqīng"),
        repaid: this.$t("m.yǐjiéqīng")
      },
      billTablesAdman: [
        {
          type: "selection",
          fixed: "left",
          width: 50,
          align: "center"
        },
        {
          title: this.$t("m.sptime"),
          key: "dueDate",
          align: "center",
          width: 110,
          fixed: "left",
          sortable: true
        },
        {
          title: this.$t("m.yīngháijīné"),
          key: "toBeRepaidAmount",
          width: 120,
          align: "center",
          render: (h, params) => {
            const { loanAmount, interestFine } = params.row;
            return h("div", [
              h(orderPoptip, {
                props: {
                  text: this.formatTreeMount((loanAmount || 0) + (interestFine || 0)),
                  content: [
                    {
                      key: this.$t('m.jièkuǎnjīné'),
                      value: this.formatTreeMount(loanAmount)
                    },
                    {
                      key: this.$t("m.penaltyRate"),
                      value: this.formatTreeMount(interestFine)
                    }
                  ]
                }
              })
            ]);
          }
        },
        {
          title: this.$t("m.userName"),
          key: "fullName",
          width: 120,
          align: "center"
        },
        {
          title: this.$t("m.phone"),
          key: "phone",
          width: 120,
          align: "center"
        },
        {
          title: this.$t("m.userType"),
          key: "isFirst",
          width: 120,
          align: "center",
          className: "column-sapce",
          render: (h, param) => {
            const {
              row: { isFirst }
            } = param;

            return h(
              "div",
              isFirst === 1 ? this.$t("m.shǒucìjièkuǎn") : this.$t("m.Ngàymai")
            );
          }
        },
        {
          title: this.$t('m.yònghùděngjí'),
          key: "levelName",
          width: 120,
          align: "center"
        },
        {
          title: this.$t('m.rLt'),
          key: "timePay",
          width: 110,
          align: "center"
        },
        {
          title: this.$t('m.loanMount'),
          key: "loanAmount",
          align: "center",
          width: 120,
          sortable: true,
          render: (h, param) => {
            return h("div", this.formatTreeMount(param.row.loanAmount));
          }
        },
        {
          title: this.$t("m.multiCost"),
          width: 120,
          align: "center",
          render: (h, params) => {
            const { serviceFee, interest } = params.row;
            return h("div", [
              h(orderPoptip, {
                props: {
                  text: this.formatTreeMount((serviceFee || 0) + (interest || 0)),
                  content: [
                    {
                      key: this.$t("m.ServiceCharge"),
                      value: this.formatTreeMount(serviceFee)
                    },
                    {
                      key: this.$t("m.Interest"),
                      value: this.formatTreeMount(interest)
                    }
                  ]
                }
              })
            ]);
          }
        },
        {
          title: this.$t("m.reAm"),
          key: "remainingRepaidAmount",
          width: 120,
          align: "center",
          render: (h, param) => {
            return h("div", this.formatTreeMount(param.row.remainingRepaidAmount));
          }
        },
        {
          title: this.$t("m.yǐháijīné"),
          key: "repaidAmount",
          width: 120,
          align: "center",
          render: (h, param) => {
            return h("div", this.formatTreeMount(param.row.repaidAmount));
          }
        },
        {
          title: this.$t('m.overdueDay'),
          key: "overDueDays",
          width: 120,
          align: "center"
        },
        {
          title: this.$t("m.cuishouRen"),
          key: "operator",
          width: 120,
          align: "center"
        },
        {
          title: this.$t("m.label"),
          key: "labelName",
          width: 120,
          align: "center"
        },
        {
          title: this.$t("m.repayCreat"),
          align: "center",
          width: 120,
          className: "column-sapce",
          render: (h, params) => {
            const { statusRepay } = params.row;
            return h("span", this.repaymentStatusArray[statusRepay]);
          }
        },
        {
          title: this.$t("m.isLock"),
          align: "center",
          width: 120,
          render: (h, params) => {
            const { isLock } = params.row;
            let txt = "";
            switch (isLock) {
              case 1:
                txt = this.$t("m.Lock");
                break;
              case 0:
                txt = this.$t("m.noLock");
                break;
              default:
                break;
            }
            return h("span", txt);
          }
        },
        {
          title: this.$t("m.orderGid"),
          key: "orderGid",
          width: 120,
          align: "center"
        },
        {
          title: this.$t("m.operate"),
          align: "center",
          width: 150,
          fixed: "right",
          render: (h, params) => {
            const {
              orderId,
              userId,
              orderGid,
              isLock,
              orderNum,
              remindLabel,
              collectionLabel,
              cellphone,
              hadRepay,
              labelId
            } = params.row;

            return h(
              "div",
              {
                style: {
                  textAlign: "left"
                }
              },
              [
                // h('Button', {
                // 	props: {
                // 		type: 'success',
                // 		size: 'small'
                // 	},
                // 	style: {
                // 		marginTop: '5px',
                // 		marginRight: '5px',
                // 	},
                // 	on: {
                // 		click: () => {
                // 			this.handleDetails(userId, orderId);
                // 		}
                // 	}
                // }, this.$t('m.detail')),
                h(
                  "Button",
                  {
                    props: {
                      type: "success",
                      size: "small",
                      long: true,
                    },
                    style: {
                      margin: "3px 0",
                		  marginTop: '5px',
                    },
                    //详情
                    on: {
                      click: () => {
                        this.billDetails(userId, orderGid);
                      }
                    }
                  },
                  this.$t("m.userDetails")
                ),
                h(
                  "Button",
                  {
                    props: {
                      type: "primary",
                      size: "small",
                      long: true,
                    },
                    style: {
                      margin: "3px 0",
                    },
                    on: {
                      click: () => {
                        this.billLabelEvent(userId, labelId);
                      }
                    }
                  },
                  this.$t("m.label")
                ),
                h(
                  "Button",
                  {
                    props: {
                      type: "warning",
                      size: "small",
                      long: true,
                    },
                    style: {
                      margin: "3px 0",
                    },
                    on: {
                      click: () => {
                        this.billRemarkEvent(userId, orderGid);
                      }
                    }
                  },
                  this.$t("m.cuīshōubèizhù")
                ),
                h(
                  "Button",
                  {
                    props: {
                      type: "error",
                      size: "small",
                      long: true,
                    },
                    style: {
                      margin: "3px 0",
                      marginBottom: '5px',
                      //  s0无锁定功能
                		  display: (isLock == 2 || this.stage === 's0') ? 'none' : 'inline-block'

                    },
                    on: {
                      click: () => {
                        this.billLockEvent(orderGid, userId, isLock);
                      }
                    }
                  },
                  isLock == 1 ? this.$t("m.Lock") : this.$t("m.noLock")
                )
                // ,
                // h('Button', {
                // 	props: { type: 'error', size: 'small' },
                // 	style: {
                // 		marginTop: '5px',
                // 		marginBottom: '5px',
                // 		display: hadRepay ? 'none' : 'inline-block'
                // 	},
                // 	on: {
                // 		click: () => {
                // 			this.handleQrcode(params.row);
                // 		}
                // 	}
                // }, '二维码')
              ]
            );
          }
        }
      ],
      billTablesDone: [
        {
          title: this.$t("m.sptime"),
          key: "dueDate",
          align: "center",
          width: 110,     
          fixed: "left",
          sortable: true
        },
        {
          title: this.$t("m.yīngháijīné"),
          key: "toBeRepaidAmount",
          width: 120,
          align: "center",
          render: (h, params) => {
            const { loanAmount, interestFine } = params.row;
            return h("div", [
              h(orderPoptip, {
                props: {
                  text: this.formatTreeMount((loanAmount || 0) + (interestFine || 0)),
                  content: [
                    {
                      key: this.$t('m.jièkuǎnjīné'),
                      value: this.formatTreeMount(loanAmount)
                    },
                    {
                      key: this.$t("m.penaltyRate"),
                      value: this.formatTreeMount(interestFine)
                    }
                  ]
                }
              })
            ]);
          }
        },
        {
          title: this.$t("m.userName"),
          key: "fullName",
          width: 120,
          align: "center"
        },
        {
          title: this.$t("m.phone"),
          key: "phone",
          width: 120,
          align: "center"
        },
        {
          title: this.$t("m.userType"),
          key: "isFirst",
          width: 120,
          align: "center",
          className: "column-sapce",
          render: (h, param) => {
            const {
              row: { isFirst }
            } = param;

            return h(
              "div",
              isFirst === 1 ? this.$t("m.shǒucìjièkuǎn") : this.$t("m.Ngàymai")
            );
          }
        },
        {
          title: this.$t('m.yònghùděngjí'),
          key: "levelName",
          width: 120,
          align: "center"
        },
        {
          title: this.$t('m.rLt'),
          key: "timePay",
          width: 110,
          align: "center",
          sortable: true
        },
        {
          title: this.$t('m.loanMount'),
          key: "loanAmount",
          align: "center",
          width: 120,
          sortable: true,
          render: (h, param) => {
            return h("div", this.formatTreeMount(param.row.loanAmount));
          }
        },
        {
          title: this.$t("m.multiCost"),
          width: 120,
          align: "center",
          render: (h, params) => {
            const { serviceFee, interest } = params.row;
            return h("div", [
              h(orderPoptip, {
                props: {
                  text: this.formatTreeMount((serviceFee || 0) + (interest || 0)),
                  content: [
                    {
                      key: this.$t("m.ServiceCharge"),
                      value: this.formatTreeMount(serviceFee)
                    },
                    {
                      key: this.$t("m.Interest"),
                      value: this.formatTreeMount(interest)
                    }
                  ]
                }
              })
            ]);
          }
        },
        {
          title: this.$t("m.reAm"),
          key: "remainingRepaidAmount",
          width: 120,
          align: "center",
          render: (h, param) => {
            return h("div", this.formatTreeMount(param.row.remainingRepaidAmount));
          }
        },
        {
          title: this.$t("m.yǐháijīné"),
          key: "repaidAmount",
          width: 120,
          align: "center",
          render: (h, param) => {
            return h("div", this.formatTreeMount(param.row.repaidAmount));
          }
        },
        {
          title: this.$t('m.overdueDay'),
          key: "overDueDays",
          width: 120,
          align: "center"
        },
        {
          title: this.$t("m.cuishouRen"),
          key: "operator",
          width: 120,
          align: "center"
        },
        {
          title: this.$t("m.label"),
          key: "labelName",
          width: 120,
          align: "center"
        },
        {
          title: this.$t("m.isLock"),
          align: "center",
          width: 120,
          render: (h, params) => {
            const { isLock } = params.row;
            let txt = "";
            switch (isLock) {
              case 1:
                txt = this.$t("m.Lock");
                break;
              case 0:
                txt = this.$t("m.noLock");
                break;
              default:
                break;
            }
            return h("span", txt);
          }
        },
        {
          title: this.$t("m.orderGid"),
          key: "orderGid",
          width: 120,
          align: "center"
        }
      ]
    };
  },
  components: {
    Identifyinfos,
    dialogLabel,
    orderPoptip,
    recordPoptip,
    dialogAssign,
    dialogRemark,
    dialogQrcode,
    BaseInfo
  },
  props: {
    flag: {
      default: null,
    },
    roleName: {
      default: null
    },
    stage: {
      default: null
    }
  },
  methods: {
    // 获取用户详情
    async userDataQuery(v = false) {
      var url = "/api/laocai/userLevel/list?&pageSize=100&pageNumber=1";
      const { body } = await this.$http.get(url);
      const { code, result } = body;
      if (code == 0 && result) {
        let Class = [];
        const list = result.list || [];
        for (const key in list) {
          Class.push({
            levelId: list[key].levelId,
            levelName: list[key].levelName
          });
        }
        this.userDataClass = [...new Set(Class)];
      }
    },
    addCount(val1, val2) {
      return (val1 + val2).toFixed(2);
    },
    // 重新分配按钮
    billAssignEvent() {
      if (this.billselectList.length) {
        this.billAssignBox = true;
      } else {
        this.$Message.warning(this.$t("m.qǐngxuǎnzéfēnpèishùjù"));
      }
    },

    billAssignEventOk() {
      this.billAssignBox = false;
      this.page = 1;
      this.getCreditOrderList();
    },
    // 获取催收人列表
    getRemindManager() {
      this.$http
        .get("/api/laocai/sys/account/list?enable=1&roleName=" + this.roleName)
        .then(res => {
          if (res.body.result) {
            this.investorList = res.body.result.list;
            this.billAssignList = res.body.result.list;
          }
        });
    },
    // admin展示列表
    billTablesAdmanList() {
      let [first, ...billTables] = this.billTablesAdman;
      this.billTables = billTables;
    },
    // 获取标签列表
    billLabelDataQuery() {
      this.$http
        .get("/api/laocai/remind/label/sys/list?pageNumber=1&pageSize=100")
        .then(res => {
          this.billLabelDataList = res.data.result ? res.data.result.list : [];
        });
    },

    billLockEvent(orderGid, userId, isLock) {
      let port = isLock == 0 ? 1 : 0;
      this.$http
        .post("/api/laocai/remind/info", {
          orderGid: orderGid,
          userId: userId,
          isLock: port
        })
        .then(res => {
            this.$Message.success(
              this.$t("m.operate") + this.$t("m.errorCode" + res.body.code)
            );
          if (res.body.code == 0) {
            this.getCreditOrderList();
          }
        });
    },
    billRemarkEvent(UserId, OrderGid) {
      this.billRemarkParam.userId = UserId;
      this.billRemarkParam.orderGid = OrderGid;
      this.billRemarkBox = true;
    },
    billRemarkEventOk() {
      this.getCreditOrderList();
    },

    // 点击详情标签
    billDetails(UserId, OrderGid) {
      this.baseInfoUserId = UserId;
      this.baseInfoOrderGid = OrderGid;
      this.baseInfoBox = true;
    },

    // 点击“标签”按钮
    billLabelEvent(UserId, labelId) {
      // debugger
      this.billLabelBoxParam = {
        UserId: UserId,
        labelId: labelId,
        list: this.billLabelDataList
      };
      this.billLabelBox = true;
    },
    // 标签配置弹窗 ok 回调函数
    billLabelEventOk() {
      this.billLabelBox = false;
      this.getCreditOrderList();
    },
    // 修改条件请求方法
    billParameterChange() {
      this.billPage = 1;
      this.billPageSize = 10;
      this.billselectList = [];
      this.getCreditOrderList();
    },
    billPageSizeChange(val) {
      this.billPageSize = val;
      this.getCreditOrderList();
    },
    billPageChange(val) {
      this.billPage = val;
      this.getCreditOrderList();
    },
    emptyQueryInfo() {
      this.time1 = [];
      this.time2 = [];
      this.levelId = '';
      this.csStage = '';
      this.isFirst = '';
      this.billOrderNum = '';
      this.billName = '';
      this.billCellphone = '';
      this.billRepaymentTimeStart = '';
      this.billRepaymentTimeEnd = '';
      this.billAssignTimeStart = '';
      this.billAssignTimeEnd = '';
      this.billManagerId = '';
      this.billLock = '';
      this.billLabel = '';
      this.billPage = '';
      this.billPageSize = '';
      this.billResult = '';
    },
    // 筛选条件
    handleFilterReset() {
      this.billPage = 1;
      this.getCreditOrderList();
    },
    tabsClick() {
      this.getCreditOrderList();
    },
    // 账单列表
    getCreditOrderList() {
      let param = {};
      let query = "";
      if (this.flag === 'cuishou') {
        param.stage = this.csStage;
      } else {
        param.stage = this.stage;
      }
      param.isFirst = this.isFirst;
      param.orderGid = this.billOrderNum;
      param.fullName = this.billName;
      param.phone = this.billCellphone;
      param.dueDateBegin = this.billRepaymentTimeStart;
      param.dueDateEnd = this.billRepaymentTimeEnd;
      param.assignDateBegin = this.billAssignTimeStart;
      param.assignDateEnd = this.billAssignTimeEnd;
      param.operator = this.billManagerId;
      param.isLock = this.billLock;
      param.labelId = this.billLabel;
      param.pageNumber = this.billPage;
      param.pageSize = this.billPageSize;
      if (this.tabsVal === 'name1') {
        param.statusRepay = this.billResult;
        param.payOff = 0;
      } else {
        param.statusRepay = 'repaid';
        param.payOff = 1;
      }
      Object.keys(param).forEach((item, index) => {
        if (param[item] || param[item] === 0) {
          query += `${index === 0 ? "" : "&"}${item}=${param[item]}`;
        }
      });
      var url = `/api/laocai/remind/list?${query}`;
      this.billLoading = true;
      this.$http.get(url).then(
        res => {
          if (res.body.code == 0) {
            if (res.body.result) {
              this.billTablesDataList = res.body.result.list;
              this.billTablesDataListSize = res.body.result.size;
            } else {
              this.billTablesDataList = [];
              this.billTablesDataListSize = 0;
            }
          }
          this.billLoading = false;
          this.$Message.success(this.$t("m.errorCode" + res.body.code));
        },
        error => {
          this.$Message.error(this.$t("m.errorCode" + res.body.code));
        }
      );
    },
    billToAssign() {},
    // 全选
    billSelectAll(status) {
      this.$refs.coTable.selectAll(status);
    },
    billTableSelect(selection) {
      this.billselectList = selection.map(item => item.orderGid);
    },
    // 选中某一项触发
    handleTableSelect(selection) {},
    // 选择时间
    repaymentTimeChange(e) {
      this.billRepaymentTimeStart = e[0];
      this.billRepaymentTimeEnd = e[1];
    },
    assignTimeChange(e) {
      this.billAssignTimeStart = e[0];
      this.billAssignTimeEnd = e[1];
    }
  },
  filters: {},
  computed: {
    ...mapGetters(["roles"])
  },
  created() {
    this.billTablesAdmanList();

    this.billLabelDataQuery();
    this.getCreditOrderList();
    this.getRemindManager();
    this.userDataQuery();
  },
  mounted() {
    this.rolee = this.roles;
  },
  destroyed() {}
};
</script>

<style lang="scss" scoped>
.query-conditions {
  .items {
    display: inline-flex;
    width: 200px;
    flex-direction: column;
    margin-bottom: 10px;
    margin-right: 20px;
    .label {
      overflow: hidden;
      white-space: inherit;
      text-align: left;
      color: #222;
      font-size: 14px;
    }
  }
}
.search_content {
  display: flex;
  justify-content: space-between;
  margin: 10px 0 20px 0;
  .search_btn_box {
    .search_btn {
      margin-right: 10px;
      width: 100px;
    }
  }
}
.search_btn {
  margin-right: 10px;
  width: 100px;
}

.bill_box {
  margin: 0 15px;
}

.ivu-form-control {
  position: relative;
  margin-right: 10px;
  width: 200px;
}

.bill_select {
  margin-bottom: 15px;
}

.bill_table {
  clear: both;
}

.bill_table_operation {
  height: 91px;
  line-height: 91px;

  margin: 15px 0px;
}

.bill_table_select {
  float: left;
}

.bill_table_page {
  float: right;
}

.billButtonBox {
  /* display: inline-block; */
  text-align: right;
  float: right;
  margin-right: 60px;
}

.billButton {
  /* text-align: center; */
  height: 33px;
  line-height: 33px;
}
</style>
